포트폴리오용 + 공부한 내용 정리용 블로그를 개발하려 한다. 찾아보니 SPA, SSR, CSR 방식 등등 다양한 방식으로 개발 할 수 있고 각 방식마다 Gatsby, NextJs 등 라이브러리도 다양하다.
여기서 각자의 장단점을 알아보고 무엇으로 개발할지 정하려고 한다.
SPA, SSR, CSR, 그리고 SSG 까지 자주 들어보기만 하고 무엇인지 정확히 알지 못했다.
가장 초기의 웹페이지는 가장 초기 웹페이지 동작 방식은 서버로부터 이미 만들어진 HTML을 페이지 별로 받아 오는 것이다. 홈으로 접속하면 home.html을 서버로 부터 받아오고, 다른 페이지로 이동하면 또 다른 페이지에 대한 html을 요청한다.
이런 방식의 단점은 페이지가 넘어 갈 때 마다 서버에 요청을 하기 때문에 로딩이 걸려 사용성이 떨어진다.
위의 단점을 개선하기 위해 XMLHttpRequest와 같은 API가 개발이 되었다. 이 API를 사용하면 HTML 파일 전체를 요청하는 것이 아닌 필요한 데이터만 요청하고 클라이언트가 JavaScript를 이용하여 이 내용을 렌더링 해주는 방식이다. 이 API가 더 발전하여 AJAX라는 라이브러리로 공식적으로 인정되었다. 이 방식이 요즘 널리 사용되는 SPA 방식이다.
따라서 한 페이지 내에서 필요한 데이터를 요청해가며 필요한 데이터를 사용자에게 보여 줄 수 있다.
SPA 방식이 널리 사용되고 클라이언트의 하드웨어가 점점 좋아지게 되면서 Client에 모든 것을 맡기는 CSR 방식이 나오게 되었다.
서버에서 index.html파일을 클라이언트에 보내주는데 여기에는 빈 화면을 보여주는 html 파일과 해당 파일에 필요한 자바스크립트 링크만이 포함되어 있다.
그렇기 때문에 처음 접속한 유저는 빈 화면을 보게 된다. 이후 링크된 자바스크립트 파일을 서버에 요청하게 되는데 이 파일에 애플리케이션에 필요한 모든 코드들이 포함되어있다.
추가로 필요한 데이터의 경우 SPA 방식과 동일하게 필요한 데이터만 서버에 요청하여 사용하게 된다.
CSR의 가장 큰 문제점은 처음 요청하는 자바스크립트 파일에 애플리케이션을 위한 모든 코드들이 포함되어 있기 때문에 첫 페이지 로딩이 아주 오래 걸린다는 것이다.
또한 SEO (Search Engine Optimization)이 좋지 않다는 점이다. 이는 수익성이 필요한 웹 사이트의 경우 심각한 문제 일 수 있다.
SEO 문제와 첫 화면 로딩을 개선하기 위해 SSR을 사용 할 수 있다. SSR은 서버에서 필요한 정보와 html 파일을 생성하여 클라이언트에게 보내주게 된다.
각 페이지에 필요한 html과 js 파일만 보내주기 때문에 첫 페이지 로딩 속도가 개선되고 컨텐츠가 HTML에 담겨있기 때문에 효율적인 SEO가 가능해 진다.
그러나 SSR 방식은 다시 가장 초기의 웹 방식과 같이 페이지 마다 Html 페이지를 로딩하는 것이기 때문에 반응성이 좋지 않을 수 있고 사용자가 많을 수록 서버에 부하가 커진다는 단점이 있다.
또한 사용자가 빠르게 첫 페이지를 확인 할 수 있지만 자바스크립트 파일이 완전히 전송되는 시간은 조금 더 늦기 때문에 사용자가 실제 interaction을 할 수 있는 시간이 조금 더 늦어 사용자가 불편을 느낄 수 있다.
SSG 방식은 React와 같은 CSR 프레임워크를 활용하여 미리 정적 사이트를 만들어 두는 방식을 말한다. 미리 html 파일을 생성하여 서버에 배포해두는 방식이다.
SSG 방식은 HTML 파일을 빌드시에 생성하여 사용한다는 점에서 기존의 SSR 방식과는 다르다.
포트폴리오 및 블로그 글의 경우 정적인 문서이기 때문에 SSG 방식이 가장 적합하다고 느껴 Gatsby를 사용하여 블로그 개발을 진행 할 예정이다.